// 使用 useImperativeHandle, forwardRef 封装组件
import React, { useState, useRef, useImperativeHandle, forwardRef, useEffect } from "react"
import ReactDOM from "react-dom/client" // 用于将React组件渲染到DOM中
import { createPortal } from "react-dom"
import { Button } from "antd"
// messageBox1('测试弹窗')
// messageBox1({
//     message: '测试弹窗',
//     title: '提示',
//     okText: '确定',
//     cancelText: '取消',
//     onOk: () => {},
//     onCancel: () => {}
// })

// forwardRef 用于将ref暴露给子组件

const MessageBox1 = forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false)
    const [options, setOptions] = useState({
        message: "测试弹窗",
        title: "提示",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
            setVisible(false)
        },
        onCancel: () => {
            setVisible(false)
        },
    })

    // useImperativeHandle 用于暴露给父组件的方法
    useImperativeHandle(ref, () => ({
        show: (options) => {
            if (typeof options === "string") {
                setOptions((prev) => ({ ...prev, message: options }))
            } else {
                setOptions((prev) => ({ ...prev, ...options }))
            }
            setVisible(true)
        },
        close: () => setVisible(false),
    }))

    if (!visible) return <></>

    return (
        <div className="mb_container">
            <div className="mb_title">{options.title}</div>
            <div className="mb_content">{options.message}</div>
            <div className="mb_btns">
                <Button className="mb_btn" onClick={() => options.onCancel()}>
                    {options.cancelText}
                </Button>
                <Button className="mb_btn" type="primary" onClick={() => options.onOk()}>
                    {options.okText}
                </Button>
            </div>
        </div>
    )
})

// 方式1：用操作dom的方式将组件渲染到body中,卸载时移除
const MessageBox = (options) => {
    const containerRef = useRef(null)

    useEffect(() => {
        const container = document.createElement("div")
        document.body.appendChild(container)
        containerRef.current = container
        const root = ReactDOM.createRoot(container)
        root.render(<MessageBox1 ref={options.ref} {...options} />)

        return () => {
            root.unmount()
            document.body.removeChild(container)
        }
    }, [])
}

// 方式2：通过Portal将组件渲染到body中,卸载时移除（react推荐方式）
function Modal(props) {
    return createPortal(<MessageBox1 {...props} />, document.body)
}

export default Modal
